//
//  ContentView.swift
//  SwiftUiBaseStudy
//
//  Created by Daniel on 2023/9/27.
//

import SwiftUI

struct ContentView: View {
    @State var show = false
    // width -> x  height -> y
    @State var viewState = CGSize.zero
    @State var showCard = false
    
    @State var showFull = false
    @State var bottomState = CGSize.zero
    
    var body: some View {
        ZStack{
            TitleView()
                .offset(y: showCard ? -200 : 0)
                .opacity(showCard ? 0.4 : 1)
                .blur(radius: show ? 20 : 0)
                .animation(Animation.default.delay(0.2), value: show || showCard)
            
            
            
            BackCardView()
                .frame(width: showCard ? 300 : 340,height: 220)
                .background(show ? Color("card3") : Color("card4"))
                .cornerRadius(20)
                .shadow(radius: 20)
                .offset(x:0,y:show ? -400 : -40)
                .offset(x:viewState.width,y:viewState.height)
                .offset(y: showCard ? -180 : 0)
                .scaleEffect(showCard ? 1 : 0.9)
                .rotationEffect(.degrees(show ? 0 :  10))
                .rotationEffect(.degrees(showCard ? -10 :  0))
                .rotation3DEffect(
                    .degrees(showCard ? 0 : 10),
                                          axis: (x: 10.0, y: 0.0, z: 0.0)
                )
                .blendMode(.hardLight)
                .animation(.easeInOut(duration: 0.5), value: show)
            BackCardView()
                .frame(width: 340,height: 220)
                .background(show ? Color("card4") :Color("card3"))
                .cornerRadius(20)
                .shadow(radius: 20)
                .offset(x:0,y:show ? -200 : -20)
                .offset(x:viewState.width,y:viewState.height)
                .offset(y: showCard ? -140 : 0)
                .scaleEffect(showCard ? 1 : 0.95)
                .rotationEffect(.degrees(show ? 0 : 5))
                .rotationEffect(.degrees(showCard ? -5 : 0))
                .rotation3DEffect(
                    .degrees(showCard ? 0 : 5),
                                          axis: (x: 10.0, y: 0.0, z: 0.0)
                )
                .blendMode(.hardLight)
                .animation(.easeInOut(duration: 0.5), value: show)
            CardView()
                .frame(width: showCard ? 375 : 340,height: 220)
                .background(.black)
                .cornerRadius(showCard ? 30 : 20)
                .shadow(radius: 20)
                .offset(x:viewState.width,y:viewState.height)
                .offset(y: showCard ? -100 : 0)
                .blendMode(.hardLight)
                .onTapGesture {
                    self.showCard.toggle()
                }
                .gesture(
                DragGesture()
                    .onChanged({ value in
                        viewState = value.translation
                        show = true
                    })
                    .onEnded({ value in
                        viewState = CGSize.zero
                        show = false
                    })
                )
                .animation(.spring(response: 0.3,dampingFraction: 0.6), value: viewState)
            
            GeometryReader {bounds in
           
            BottomPopupView(show: $showCard)
                    .offset(x:0,y:showCard ? bounds.size.height/2 : bounds.size.height + bounds.safeAreaInsets.top+bounds.safeAreaInsets.bottom)
                .offset(y:bottomState.height)
                .blur(radius: show ? 20 : 0)
                .animation(.timingCurve(0.2, 0.8, 0.2, 1, duration: 0.8), value: show || showCard)
                .gesture(
                DragGesture()
                    .onChanged({ value in
                        bottomState = value.translation
                        if showFull{
                            bottomState.height += -300
                        }
                        if bottomState.height < -300 {
                            bottomState.height = -300
                        }
                        
                    })
                    .onEnded({ value in
                        if bottomState.height > 50 {
                            showCard = false
                        }
                        // 节点控制
                        if (!showFull && bottomState.height < -100)||(showFull && bottomState.height < -250){
                            showFull = true
                            bottomState.height = -300
                        }else{
                            
                            bottomState = CGSize.zero
                            showFull = false
                        }
                    })
                )
                .ignoresSafeArea(.all)
            }
            
        }
    }
}

#Preview {
    ContentView()
}

struct CardView: View {
    var body: some View {
        VStack{
            HStack{
                VStack(alignment: .leading) {
                    Text("UI Design")
                        .font(.title)
                        .fontWeight(.semibold)
                        .foregroundColor(.white)
                    Text("Cetificate")
                        .foregroundColor(Color("accent"))
                }
                Spacer()
                Image("Logo1")
            }
            .padding(.horizontal,20)
            .padding(.top,20)
            Image("Card1")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 300,height: 100,alignment: .top)
        }
        
    }
}

struct BackCardView: View {
    var body: some View {
        VStack{}
            
           
    }
}

struct TitleView: View {
    var body: some View {
        VStack{
            HStack{
                Text("Cetificates")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                Spacer()
            }
            .padding()
            Image("Background1")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(maxWidth: 375)
            Spacer()
        }
    }
}

struct BottomPopupView: View {
    @Binding var show:Bool
    var body: some View {
        VStack(spacing:20){
            Rectangle()
                .frame(width: 40,height: 5)
                .background(.black)
                .cornerRadius(30)
                .opacity(0.1)
            Text("This certificate is proof that Meng To has achieved the UI Design course with approval from a Design+Code instructor.")
                .font(.subheadline)
                .multilineTextAlignment(.center)
                .lineSpacing(4)
            HStack(spacing: 20.0) {
                RingView(color1: #colorLiteral(red: 0.3647058904, green: 0.06666667014, blue: 0.9686274529, alpha: 1),color2: #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1),width:88,height:88, show: $show)
//                    .animation(.easeInOut, value: show)
                VStack(alignment: .leading, spacing: 8.0){
                    Text("Swift UI Prototype")
                        .bold()
                    Text("12 of 12 sections completed \n10 hours spent so far")
                        .font(.subheadline)
                        .foregroundStyle(.gray)
                        .lineSpacing(3)
                }
                .padding(20)
//                .background(.white)
                .background(Color("background2"))
                .clipShape(RoundedRectangle(cornerRadius: 20))
                .shadow(color: .black.opacity(0.2), radius: 20,x:0,y:10)
            }
            Spacer()
        }
        .padding(.vertical,8)
        .padding(.horizontal,20)
        .frame(maxWidth: 712)
       
//        .background(.white)
        .background(BlurView(style: .systemThinMaterial))
        .cornerRadius(30)
        .shadow(radius: 20)
        .frame(maxWidth: .infinity)
        
    }
}
